import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { updateProductAction } from '../../store/actionCreator'
import axios from 'axios'
class NewItemList extends Component {
  state = {
    lovingList: []
  }
  componentDidMount() {
      var productInfo= JSON.parse(window.localStorage.getItem('productInfo'))||{}
      var id=productInfo.itemId||this.props.id
      var formData = new FormData()
      formData.append('id', id)
      axios({
        url: '/xhr/wapitem/rcmd.json',
        method: 'post',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        data: formData,
      }).then((res) => {
        let list =res.data.data.items
        this.setState({
          lovingList:[list.slice(0, 2),
            list.slice(2, 4),
            list.slice(4, 6),
            list.slice(6, 8),
            list.slice(8, 10),]
        },)
      })
    /* 请求猜你喜欢数据结束 */ 
  }
  /* 销毁请求 */
  componentWillUnmount() {
    this.setState = ()=>false;
}
  render() {
    return (
      <div style={{backgroundColor:'#fff'}}>
      {/* 猜你喜欢开始 */}
          <div className="lovingGoodTit">
            <div className="itemLine"></div>
            <span className="itemText">你可能还喜欢</span>
          </div>
          {
            this.state.lovingList.map((item, i) => (
              <div className="NewItemList" key={i}>
                {item.map((v, i) => (
                  <div
                    className="NewItemListItem"
                    key={v.displaySkuId}
                    onClick={() => {
                      this.props.history.push('/ProductDetail/?id=' + v.id)
                    }}
                  >
                    <img src={v.primaryPicUrl} alt="" />
                    <div className="newItemTitle">{v.name}</div>
                    <div className="newItemPrice">¥{v.retailPrice}</div>
                    <div className="newItemTag">
                      {v.itemTagList &&
                        v.itemTagList.map((val, i) => (
                          <span key={val.name + val.tagId}>{val.name}</span>
                        ))}
                    </div>
                  </div>
                ))}
              </div>
            ))}
        {/* 猜你喜欢结束 */}
        </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    productReducer: state.getIn(['productReducer']),
    id: state.getIn(['productReducer','productInfo','itemId'])
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    updateProduct: (detail) => {
      dispatch(updateProductAction(detail))
    },
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(NewItemList))
